<template>
<div class="top">
     <tiny-radio v-model="theme" label="白天模式" @change="change">白天模式</tiny-radio>
  <tiny-radio v-model="theme" label="黑夜模式" @change="change">黑夜模式</tiny-radio>
  <tiny-select v-model="language" placeholder="请选择语言" size="mini" @change="change">
    <tiny-option v-for="item in languages" :key="item.value" :label="item.label" :value="item.value">
    </tiny-option>
  </tiny-select>
</div>
    <!-- :indent-with-tab="true" 是否自动获取焦点-->
    <codemirror v-model="code" placeholder="Code gose here..." style="height:100%" :autofocus="true"
        :tabSize="2" :extensions="extensions"
     @ready=""
        @change="" @focus="" @blur="" />
</template>
<!-- @ready="ready('ready', $event)"
        @change="Change('change', $event)" @focus="focus('focus', $event)" @blur="blur('blur', $event)" -->
<script  setup>
import { Codemirror } from "vue-codemirror";
import {python} from "@codemirror/lang-python";
import {cpp} from "@codemirror/lang-cpp";
import {javascript} from "@codemirror/lang-javascript"
import { oneDark } from "@codemirror/theme-one-dark";
import { ref } from "vue";
import { EditorView } from "@codemirror/view"
import {Radio as TinyRadio, Select as TinySelect, Option as TinyOption} from '@opentiny/vue'
const languages = ref([
  {value: 'cpp', label: 'cpp',},
  {value: 'python', label: 'python',},
  {value: 'javascript', label: 'javascript'},

])
const language = ref('cpp')
const theme = ref("白天模式")

let myTheme = EditorView.theme({// 输入的字体颜色
    "&": {
        color: "#0052D9",
        backgroundColor: "#FFFFFF"
    },
    ".cm-content": {
        caretColor: "#0052D9",
    },
    // 激活背景色
    ".cm-activeLine": {
        backgroundColor: "#FAFAFA"
    },
    // 激活序列的背景色
    ".cm-activeLineGutter": {
        backgroundColor: "#FAFAFA"
    },
    //光标的颜色
    "&.cm-focused .cm-cursor": {
        borderLeftColor: "#0052D9"
    },  "&.cm-focused .cm-selectionBackground, ::selection": {
        backgroundColor: "#0052D9",
        color:'#FFFFFF'
    },
    // 左侧侧边栏的颜色
    ".cm-gutters": {
        backgroundColor: "#FFFFFF",
        color: "#ddd", //侧边栏文字颜色
        border: "none"
    }
}, { dark: true })
const extensions =ref([cpp(), myTheme]);
const change = () => {
  console.log(theme.value)
  if (theme.value == '白天模式'&&language.value=='cpp') {
  extensions.value = [cpp(), myTheme];
  }
  if(theme.value == '黑夜模式'&&language.value=='cpp'){
    console.log('黑夜模式')
    extensions.value = [cpp(), oneDark];
  }
  if (theme.value == '白天模式'&&language.value=='python') {
    extensions.value = [python(), myTheme];
  }
  if(theme.value == '黑夜模式'&&language.value=='python'){
    extensions.value = [python(), oneDark];
  }
  if (theme.value == '白天模式'&&language.value=='javascript') {
    extensions.value = [javascript(), myTheme];
  }
  if (theme.value == '黑夜模式'&&language.value=='javascript'){
    extensions.value = [javascript(), oneDark];
  }
}

const code = ref(``);

</script>
<style scoped lang="less">
.tiny-select {
  width: 200px;
}
.top{
  margin:10px;
}
</style>